<template>
	<div class="product">
		<el-card class="box-card">
			<el-button type="primary" @click="showDialog">添加+</el-button>
			<!-- 列表 -->
			<el-table :data="tableData" style="width: 100%" :border="true">
				<el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
				<el-table-column prop="tmName" label="品牌名称" width="width"></el-table-column>
				<el-table-column prop="logoUrl" label="品牌LOGO" width="width">
					<template slot-scope="{ row }">
						<img :src="row.logoUrl" alt="" style="height: 100px" />
					</template>
				</el-table-column>
				<el-table-column label="操作" width="width">
					<template slot-scope="{ row }">
						<el-button type="warning" @click="update(row)">修改</el-button>
						<el-button type="danger" @click="remove(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<!-- 分页 -->
		<el-pagination
			style="text-align: center; margin-top: 20px"
			background
			layout="prev, pager, next"
			:current-page="page"
			:page-count="pages"
			@current-change="handlerPage">
		</el-pagination>
		<!-- dialog -->
		<el-dialog title="添加品牌" :visible.sync="dialogFormVisible" width="600px">
			<el-form :model="form">
				<el-form-item label="品牌名称">
					<el-input v-model="form.tmName" autocomplete="off" style="width: 300px"></el-input>
				</el-form-item>
				<el-form-item label="品牌LOGO">
					<el-upload
						class="avatar-uploader"
						action="/admin/product/fileUpload"
						:show-file-list="false"
						:on-success="handleAvatarSuccess"
						:before-upload="beforeAvatarUpload">
						<img v-if="form.logoUrl" :src="form.logoUrl" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button v-if="isUpload" type="primary" @click="upload">提 交</el-button>
				<el-button v-else type="primary" @click="save">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getTrademarkList, addTrademark, removeTrademark, updateTrademark } from '@/api/product';
export default {
	name: 'ProductBrand',
	data() {
		return {
			page: 1,
			limit: 5,
			pages: 0,
			tableData: [], // 品牌数据
			dialogFormVisible: false, // 是否显示dialog
			form: {
				tmName: '', // 品牌名称
				logoUrl: '', // 上传图片地址
			},
			isOk: false,
			isUpload: true,
		};
	},
	methods: {
		// 请求品牌数据
		getDataList() {
			getTrademarkList(this.page, this.limit).then(data => {
				this.tableData = data.data.data.records;
				this.pages = data.data.data.pages;
			});
		},
		// 添加按钮
		showDialog() {
			this.form = { tmName: '', logoUrl: '' };
			this.isUpload = true;
			this.dialogFormVisible = true;
		},
		// 分页修改
		handlerPage(page) {
			this.page = page;
			this.getDataList();
		},
		handleAvatarSuccess(res, file) {
			this.form.logoUrl = URL.createObjectURL(file.raw);
		},
		beforeAvatarUpload(file) {
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
			}
			return isLt2M;
		},
		// 上传品牌
		upload() {
			delete this.form.id;
			this.isOk = true;
			Object.values(this.form).forEach(value => {
				if (!value) return (this.isOk = false);
			});
			if (this.isOk) {
				this.dialogFormVisible = false;
				addTrademark(this.form).then(
					resolve => {
						this.$message({
							message: '添加品牌成功！',
							type: 'success',
						});
					},
					reject => {
						this.$message({
							message: '添加品牌失败，请稍后再试！',
							type: 'error',
						});
					}
				);
			} else {
				this.$message({
					message: '请填写完整品牌数据',
					type: 'warning',
				});
			}
		},
		// 修改品牌按钮
		update(row) {
			this.form = row;
			this.isUpload = false;
			this.dialogFormVisible = true;
		},
		// 保存
		save() {
			updateTrademark(this.form).then(
				resolv => {
					this.$message({
						type: 'success',
						message: '修改成功!',
					});
					this.dialogFormVisible = false;
				},
				reject => {
					this.$message({
						type: 'success',
						message: '修改失败，请稍后再试!',
					});
					this.dialogFormVisible = false;
				}
			);
		}, // 删除订单
		remove(id) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					removeTrademark(id).then(
						resolve => {
							this.$message({
								type: 'success',
								message: '删除成功!',
							});
							this.getDataList();
						},
						reject => {
							this.$message({
								type: 'error',
								message: '删除失败!',
							});
						}
					);
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除',
					});
				});
		},
	},
	created() {
		this.getDataList();
	},
};
</script>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>
